<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>Dual X-Axis</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">Dual X-Axis</p>
<hr class="separator">
<div class="content">
<img src="images/dualxaxis.png" width='310' height='310'>
<br><br>
This example demonstrates a chart with two x-axes and two y-axes.<br><br>
ChartDirector supports arbitrary number of axes. The first two x and y axes are most commonly used and can be retrieved using <a href="XYChart.xAxis.htm">XYChart.xAxis</a>, <a href="XYChart.xAxis2.htm">XYChart.xAxis2</a>, <a href="XYChart.yAxis.htm">XYChart.yAxis</a> and <a href="XYChart.yAxis2.htm">XYChart.yAxis2</a>. These axes are by default positioned at the edges of the plot area.<br><br>
The key features demonstrated in this example are:<br><br>
<ul><li> Accessing both the top and bottom x-axes using <a href="XYChart.xAxis.htm">XYChart.xAxis</a> and <a href="XYChart.xAxis2.htm">XYChart.xAxis2</a> and set labels to both axes using <a href="Axis.setLabels.htm">Axis.setLabels</a>.<br><br>
<li> Accessing both the primary and secondary y-axes by <a href="XYChart.yAxis.htm">XYChart.yAxis</a> and <a href="XYChart.yAxis2.htm">XYChart.yAxis2</a>.<br><br>
<li> Synchronizing the primary and secondary y-axes by using <a href="XYChart.syncYAxis.htm">XYChart.syncYAxis</a>.<br><br>
<li> Use multiple x-axis label formats by using <a href="Axis.setMultiFormat.htm">Axis.setMultiFormat</a>.<br><br>
<li> Use <a href="Axis.setTickLength.htm">Axis.setTickLength</a> and <a href="Axis.setTickLength2.htm">Axis.setTickLength2</a> to control the axis ticks length and orientation (that is, internal or external to the chart)</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/dualxaxis.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The data for the chart
double[] data0 = {42, 49, 33, 38, 51, 46, 29, 41, 44, 57, 59, 52, 37, 34, 51, 56, 56, 60, 70, 76,
    63, 67, 75, 64, 51};
double[] data1 = {50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77,
    84, 82, 80, 84, 98};

// The labels for the bottom x axis. Note the "-" means a minor tick.
String[] labels0 = {"0\nJun 4", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13",
    "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "0\nJun 5"};

// The labels for the top x axis. Note that "-" means a minor tick.
String[] labels1 = {"Jun 3\n12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23",
    "Jun 4\n0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"};

// Create a XYChart object of size 310 x 310 pixels
XYChart c = new XYChart(310, 310);

// Set the plotarea at (50, 50) and of size 200 x 200 pixels
c.setPlotArea(50, 50, 200, 200);

// Add a title to the primary (left) y axis
c.yAxis().setTitle("US Dollars");

// Set the tick length to -4 pixels (-ve means ticks inside the plot area)
c.yAxis().setTickLength(-4);

// Add a title to the secondary (right) y axis
c.yAxis2().setTitle("HK Dollars (1 USD = 7.8 HKD)");

// Set the tick length to -4 pixels (-ve means ticks inside the plot area)
c.yAxis2().setTickLength(-4);

// Synchronize the y-axis such that y2 = 7.8 x y1
c.syncYAxis(7.8);

// Add a title to the bottom x axis
c.xAxis().setTitle("Hong Kong Time");

// Set the labels on the x axis.
c.xAxis().setLabels(labels0);

// Display 1 out of 3 labels on the x-axis. Show minor ticks for remaining labels.
c.xAxis().setLabelStep(3, 1);

// Set the major tick length to -4 pixels and minor tick length to -2 pixels (-ve means ticks inside
// the plot area)
c.xAxis().setTickLength2(-4, -2);

// Set the distance between the axis labels and the axis to 6 pixels
c.xAxis().setLabelGap(6);

// Add a title to the top x-axis
c.xAxis2().setTitle("New York Time");

// Set the labels on the x axis.
c.xAxis2().setLabels(labels1);

// Display 1 out of 3 labels on the x-axis. Show minor ticks for remaining labels.
c.xAxis2().setLabelStep(3, 1);

// Set the major tick length to -4 pixels and minor tick length to -2 pixels (-ve means ticks inside
// the plot area)
c.xAxis2().setTickLength2(-4, -2);

// Set the distance between the axis labels and the axis to 6 pixels
c.xAxis2().setLabelGap(6);

// Add a line layer to the chart with a line width of 2 pixels
c.addLineLayer(data0, -1, "Red Transactions").setLineWidth(2);

// Add an area layer to the chart with no area boundary line
c.addAreaLayer(data1, -1, "Green Transactions").setLineWidth(0);

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "",
    "title='{dataSetName}\nHKT Jun {=3.5+{x}/24|0} {={x}%24}:00 (NYT Jun {=3+{x}/24|0} " +
    "{=({x}+12)%24}:00)\nHKD {={value}*7.8} (USD {value})'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Dual X-Axis&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        Dual X-Axis
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
